<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-8">
    <h2 class="text-3xl font-bold mb-6">⚙ 游戏设置</h2>
    <div class="space-y-4 text-lg text-gray-700 w-full max-w-sm" >
      <div>🔈 音效：<input type="checkbox" checked /></div>

       <!-- 背景音乐开关 -->
      <div class="flex items-center">
        <label for="bgm-toggle">🎵 背景音乐：</label>
        <input id="bgm-toggle" type="checkbox" v-model="bgmOn" />
      </div>

      <!-- 音量滑块 -->
      <div>
        <div class="flex items-center">
            <label for="bgm-toggle">🔊 音量调节：</label>
            <input type="range" min="0" max="1" step="0.01" v-model.number="volume"  />
        </div>
        
        <div class="text-sm text-gray-500">当前音量：{{ Math.round(volume * 100) }}%</div>
      </div>
      
      <div>🧠 AI 难度：
        <select>
          <option>简单</option>
          <option>普通</option>
          <option>困难</option>
        </select>
      </div>
    </div>
    <button @click="$emit('back')" class="mt-6 bg-blue-500 text-white px-6 py-2 rounded">返回主菜单</button>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'

const emit = defineEmits(['back'])
const bgmOn = ref(true)
const volume = ref(0.5)

onMounted(() => {
  // 从 localStorage 获取设置
  bgmOn.value = localStorage.getItem('bgmOn') !== 'false'
  volume.value = parseFloat(localStorage.getItem('bgmVolume') || '0.5')

  updateAudio()
})

watch(bgmOn, (val) => {
  localStorage.setItem('bgmOn', val)
  updateAudio()
})

watch(volume, (val) => {
  localStorage.setItem('bgmVolume', val)
  updateAudio()
})

function updateAudio() {
  const audio = document.querySelector('audio')
  if (audio) {
    audio.volume = volume.value
    if (bgmOn.value) audio.play().catch(() => {})
    else audio.pause()
  }
}
</script>